<template>
    <div class="mater">
        <ul class="infoBoxChild clearfix">
            <li v-for="(item,i) in indexMsg.items[modeType]" :key="item.id" v-if="i>length-1?false:true">
                <!-- <router-link :to="toUrl+'/'+item.id"> -->
                <div class="infoImg">
                    <img :ref="item" :src="item.image" alt="" style="opacity:0" @load="getWh(item,i)" :title="item.title">
                    <!-- <img :ref="item" :src="item.image" alt=""> -->
                    <!-- <div class="clearfix infoTextBox">
                        <div class="infoText">
                            <p class="vipText">{{item.title}}</p> -->
                            <!-- <p class="infoItemId">ID:&nbsp<span>{{item.id}}</span></p> -->
                       <!--  </div>
                    
                    <p class="infoItemPrompt"> -->
                        <!-- <button>
                            <i class="iconfont icon-tubiao114"></i>
                            收藏
                        </button> -->
                            <!-- <button @click.prevent.stop="downs(item.imageoriginal,item.title)">
                                <i class="downloadStatus"></i>
                                下载
                            </button>
                    </p>

                    </div> -->
                    <p class="infoItemPrompt">
                        <span class="vipText" :title="item.title">{{item.title}}</span>
                       
                        <button class="downBox" @click.prevent.stop="downs(item.imageoriginal,item.title)">
                            <i class="downloadStatus"></i>
                            <!-- 下载 -->
                        </button>
                    </p>
                </div>
                <!-- </router-link> -->
            </li>
        </ul>
        <div v-if="indexMsg&&indexMsg.items[modeType].length==0" class="contentNull" :class="{searchClass,'searchClass':searchText}">
            <!-- 暂无内容 -->
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
    export default{
        name : "mater",
        props: ["length",//渲染的个数
                "toUrl",//要跳转的地址
                "indexMsg",//请求回来的信息
                "modeType",//请求信息的类型
                "searchClass",//搜索class
                "searchText"
                ],
        data(){
            return {
                msg: "模型列表",
            }
        },
        methods:{
            confirmDownload(src,title) {
                this.downloadIamge(src,title)
            },
            getWh(ele,index){
                // if(this.$refs[ele][index].clientWidth<this.$refs[ele][index].clientHeight){
                //     this.$refs[ele][index].setAttribute("class","modeBannerH");
                //     this.$refs[ele][index].style.opacity = 1;
                // }else if(this.$refs[ele][index].clientWidth==this.$refs[ele][index].clientHeight){
                    this.$refs[ele][index].setAttribute("class","modeBannerAuto");
                    this.$refs[ele][index].style.opacity = 1;
                // }else{
                //     this.$refs[ele][index].setAttribute("class","modeBannerW");
                //     this.$refs[ele][index].style.opacity = 1;
                // }
            },
            errorWarning() {
            this.$message({
                message: '请登录后再进行下载',
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        }, 
         ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        downloadIamge(imgsrc, name) {//下载图片地址和图片名
            /* var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc; */
            window.open(this.user.userInfo.data.app_url+"api/downmap?imagepath="+imgsrc)
            
        },
        downs(urlMsg,name){

            if(this.$store.state.AuthUser.userInfo){
                this.confirmDownload(urlMsg,name)
                // this.downloadIamge(urlMsg, name) 
            }else{
               this.loginShow();
            }
            
        },
            // 下载文件
        download (data) {//下载要执行的函数
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(data)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            // link.setAttribute('download', 'excel.zip')
            document.body.appendChild(link)
            link.click()
        },
    

    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    }
</script>
<style scope>
@import "../css/global.css";

 
.mater .infoImg{
    width: 300px;
    height: 300px;
    border-radius: 4px;
}
.mater .infoBoxChild li{
    width: 300px;
    height: 300px;
    margin-right: 22px;
}
.mater .infoTextBox{
    top: 275px;
}
.mater .infoBoxChild li:hover .infoTextBox{
    top: 0;
    transition: all .3s;
}
.mater .infoTextBox .vipText{
    color: #fff;
    text-align: center;
    margin-top:100px;
    font-size: 16px;
    line-height: 66px;
}
.mater .infoItemPrompt{
    /* text-align: center; */
    
}
.mater .infoItemPrompt button{
    color: #fff;
    margin-left:60px;
}
.mater .infoItemPrompt button:hover{
    color: #ec6560;
}
.mater .infoImg img{
    width: auto;
    height: 300px!important;
}
.mater .infoItemPrompt i{
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align:middle;
}
.mater .downloadStatus{
    background: url(../img/indexDownloads.png) no-repeat center;
}
.mater .infoItemPrompt button:hover .downloadStatus{
    background: url(./img/hoverDownload.png) no-repeat center;
}
.mater .infoImg .modeBannerW {
  width: 100%!important;
  height: 209px!important;
  display: block;
  margin-top: 30px;
}
.mater .infoImg .modeBannerH{
  width: 200px!important;
  height: 272px!important;
  margin-top: 0;
  margin: 0 auto;
  display: block;

}

.mater .infoImg .modeBannerAuto{
    width: 300px!important;
  height: 300px!important;
  margin-top: 0;
  margin: 0 auto;
  display: block;
}
.mater .infoItemPrompt .vipText{
    width: 180px;
}
</style>


